<template>
	<view class="goodsDetails">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in detailList.pics" :key='index + item.goods_id'>
				<view class="swiper-item">
					<image :src="item.pics_mid_url" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="goodsDetails_main">
			<view class="name">{{detailList.goods_name}}</view>
			<view class="price">${{detailList.goods_price}}</view>
		</view>
		<rich-text :nodes="detailList.goods_introduce"></rich-text>
		<view class="floor">
			<uni-goods-nav :fill="true" :options="options" @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailList: [],
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
				}],
			}
		},
		onLoad(option) {
			this.getGoodsDetail(option.id)
		},
		computed: {

		},
		methods: {
			async getGoodsDetail(id) {
				let params = {
					//  #ifdef MP-WEIXIN
					goods_id: id,
					// #endif
					//  #ifdef H5
					goods_id: this.$route.query.id,
					// #endif
				}
				let res = await this.$store.dispatch('getGoodDetail', params)
				this.detailList = res.data.message
				console.log(this.detailList)
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
				if(e.content.text === '购物车'){
					uni.switchTab({
						url: '/pages/cart/cart'
					});
				}
			},
			buttonClick(e) {
				if (e.index === 0) {
					let list = {
						goods_id: this.detailList.goods_id,
						pric: this.detailList.goods_price,
						num: 1,
						checked: true,
						max: this.detailList.goods_number,
						imgUrl: this.detailList.goods_small_logo
					}
					let cart = uni.getStorageSync('cart') || [];
					let index = cart.findIndex(item => item.goods_id === list.goods_id);
					if (index === -1) {
						cart.push(list)
					} else {
						cart[index].num++
					}
					uni.setStorageSync("cart",cart)
					this.$store.commit("CARTLIST",cart)
				} else {
					uni.switchTab({
						url: '/pages/cart/cart'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.goodsDetails swiper {
		width: 750rpx;
		height: 500rpx;
	}

	.goodsDetails swiper image {
		width: 100%;
	}

	.goodsDetails_main {
		width: 100%;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.goodsDetails_main .name {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goodsDetails_main .price {
		font-size: 60rpx;
		color: red;
		font-weight: 600;
	}

	.goodsDetails .floor {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>
